// uno.config.ts
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";
import presetWind4 from "@unocss/preset-wind4";
import { createRemToPxProcessor } from "@unocss/preset-wind4/utils";

export default defineConfig({
  shortcuts: [
    {
      "flex-center": "flex justify-center items-center",
      "flex-x-center": "flex justify-center",
      "flex-y-center": "flex items-center",
      "flex-x-between": "flex items-center justify-between",
      "flex-x-end": "flex items-center justify-end",
      "wh-full": "w-full h-full",
      "text-truncate": "whitespace-nowrap overflow-hidden text-ellipsis",
      "bg-no-repeat-contain": "bg-no-repeat bg-contain",
      "bg-no-repeat-cover": "bg-no-repeat bg-cover",
      "abs-full": "absolute left-0 right-0 top-0 bottom-0",
      "abs-x-center": "absolute left-50% top-0 translate-x--1/2",
      "abs-y-center": "absolute left-0 top-50% translate-y--1/2",
      "abs-center":
        "absolute left-50% top-50% translate-x--1/2 translate-y--1/2",
    },
  ],
  theme: {
    colors: {
      // ...
      primary: "#165DFF",
      secondary: "#FF7D00",
      success: "#00B42A",
      warning: "#FF7D00",
      danger: "#F53F3F",
      info: "#86909C",
      light: "#F2F3F5",
      dark: "#1D2129",
    },
  },
  presets: [
    presetAttributify(),
    presetIcons(
      {
        autoInstall: true,
        extraProperties: {
          'display': 'inline-block',
          'vertical-align': 'middle',
        },
        collections: {
        // carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
        mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
        // logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
      }
      }
    ),
    presetTypography(),
    presetWind4({
      preflights: {
        theme: {
          process: createRemToPxProcessor(16),
        },
      },
    }),
  ],
});
